<template>
  <div class="choose-view">
    <div class="bread-con">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>操作员管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="操作员账号：">
        <el-input v-model="formInline.userName" placeholder="输入操作员账号"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名：">
        <el-input v-model="formInline.realName" placeholder="输入真实姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="onEmptied">清空</el-button>
      </el-form-item>
      <el-form-item class="test-case-con">
        <router-link class="test-add-btn" to="addResultPage">新增操作员</router-link>
      </el-form-item>
    </el-form>
    <div class="test-table">
      <el-table
        :data="accountDataList"
        border
        style="width: 100%">
        <el-table-column
          prop="realName"
          align="center"
          label="真实姓名">
        </el-table-column>
        <el-table-column
          prop="userName"
          align="center"
          label="操作员账号">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center">
          <template scope="scope">
            <el-button @click="testEdit(scope.$index, accountDataList,$el)" type="text" size="small">编辑</el-button>
            <el-button @click="testRemove(scope.$index, accountDataList)" type="text" size="small"
                       class="test-remove-color">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog size="tiny" title="编辑操作员" :visible.sync="dialogFormVisible">
        <el-form :model="editForm">
          <el-form-item label="真实姓名：" :label-width="formLabelWidth">
            <el-input v-model="editForm.realName" auto-complete="on"></el-input>
          </el-form-item>
          <el-form-item label="操作员账号：" :label-width="formLabelWidth">
            <el-input v-model="editForm.userName" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="subEdit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="choose-page">
      <test-page :table-list="accountDataList" :table="accountData" @get-table-list="getPageList"
                 @get-table-data="getPageData" :url="dataUrl" :query-data="search"></test-page>
    </div>
  </div>
</template>
<script type='text/ecmascript-6'>
  import Page from '@/components/testPage.vue';
  const sucStatus = 200;
  export default {
    data() {
      return {
        formInline: {
          realName: '',
          userName: ''
        },
        editForm: {
          realName: '',
          userName: '',
          password: '',
          id: ''
        },
        dialogFormVisible: false,
        defPageSize: 10000,
        defPageNum: 1,
        accountDataList: [],
        accountData: {},
        dataUrl: 'http://192.168.59.99:8080/automatedtest/automated/user',
        search: '',
        formLabelWidth: '120px'
      };
    },
    components: {
      'test-page': Page
    },
    created () {
      this.$ajax({
        method: 'GET',
        url: 'http://192.168.59.99:8080/automatedtest/automated/user?pageSize=10&pageNum=1'
      }).then((response) => {
        if (response.status === sucStatus) {
          this.accountDataList = response.data.data.list;
          this.accountData = response.data.data;
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: 'error'
          });
        }
      });
    },
    methods: {
      getPageList: function (list) {
        list.forEach(function (v, k) {
          v.createTime = new Date(v.createTime).toLocaleString().replace(/:\d{1,2}$/, ' ');
        });
        this.accountDataList = list;
      },
      getPageData: function (data) {
        this.accountData = data;
      },
      onSubmit: function () {
        this.search = `&userName=${this.formInline.userName}&realName=${this.formInline.realName}&pageNum=${this.defPageNum}`;
        this.getQueryData(this.search);
      },
      onEmptied: function () {
        this.search = `&pageNum=${this.defPageNum}`;
        this.formInline.realName = '';
        this.formInline.userName = '';
        this.getQueryData(this.search);
      },
      getQueryData: function (str) {
        this.$ajax({
          method: 'GET',
          url: `http://192.168.59.99:8080/automatedtest/automated/user?pageSize=10${str}`
        }).then((response) => {
          if (response.status === sucStatus) {
            this.accountDataList = response.data.data.list;
            this.accountData = response.data.data;
          } else {
            this.$message({
              showClose: true,
              message: response.data.message,
              type: 'error'
            });
          }
        });
      },
      testEdit(i, list, el) {
        this.dialogFormVisible = !this.dialogFormVisible;
        this.editForm.userName = list[i].userName;
        this.editForm.realName = list[i].realName;
        this.editForm.password = list[i].password;
        this.editForm.id = list[i].id;
      },
      testRemove(i, list) {
        this.$confirm('此操作将永久删除case类型, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$ajax({
            method: 'DELETE',
            url: 'http://192.168.59.99:8080/automatedtest/automated/user?id=' + list[i].id
          }).then((response) => {
            if (response.status !== sucStatus) {
              this.$message({
                showClose: true,
                message: response.data.message,
                type: 'error'
              });
            } else {
              list.splice(i, 1);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        });
      },
      subEdit() {
        this.$ajax({
          method: 'PUT',
          url: 'http://192.168.59.99:8080/automatedtest/automated/user',
          data: this.editForm
        }).then((response) => {
          if (response.status === sucStatus) {
            this.dialogFormVisible = !this.dialogFormVisible;
            this.search = `&pageNum=${this.defPageNum}`;
            this.getQueryData(this.search);
          }
        });
      },
      addCase() {
        console.log('新增');
      }
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../static/css/querySearch.styl"
  .test-table
    padding: 20px 0 0 0;

  .test-table .test-remove-color
    color: #FF4949;

  .test-table .test-remove-color:hover
    color: red;

  .test-case-con
    float: right;

  .test-add-btn
    display: inline-block;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid #ddd;

</style>
